<template>
    <!-- Element Plus表单组件 -->
    <el-form label-width="96px" ref="info_modal_data_ref" :model="info_modal.form_data" :rules="info_modal.rules"
        size="large" v-if="userStore.info_data.auditStatus == 1">
        <!-- 个人信息区域 -->
        <div class="box">
            <h3>人员个人信息</h3>
            <el-form-item label="姓名" prop="studentName">
                <el-input v-model.trim="info_modal.form_data.studentName" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="info_modal.form_data.gender" class="ml-4">
                    <el-radio label="0" size="large">女</el-radio>
                    <el-radio label="1" size="large">男</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="证件照" prop="documentImg">
                <el-text type="info" size="small">本人近 1 年内正面、免冠、无妆、彩色电子证件照（白色 /
                    蓝色背景，用于证件照片）</el-text>
                <UploadImage v-model="info_modal.form_data.documentImg" />
            </el-form-item>
            <el-form-item label="证件类型" prop="documentType">
                <IdTypeSelect v-model="info_modal.form_data.documentType" />
            </el-form-item>
            <el-form-item label="证件号码" prop="documentNumber">
                <el-input v-model="info_modal.form_data.documentNumber" placeholder="请输入证件号码" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="info_modal.form_data.phone" placeholder="请输入手机号码" />
            </el-form-item>
        </div>
        <div class="box">
            <h3>所属学校与地区</h3>
            <el-form-item label="所属学校" prop="schoolName">
                <el-input v-model="info_modal.form_data.schoolName" placeholder="请输入所属学校" />
            </el-form-item>
            <el-form-item label="所属市区" prop="county">
                <ProvinceSelect :isW="true" v-model:economize="info_modal.form_data.economize"
                    v-model:market="info_modal.form_data.market" v-model:county="info_modal.form_data.county"
                    :showCounty="true" />
            </el-form-item>
        </div>
        <!-- 保存按钮 -->
        <div class="box">
            <el-form-item>
                <el-button type="primary" size="large" @click="handleSubmit" :loading="loading"
                    color="#1964d6">保存信息</el-button>
            </el-form-item>
        </div>
    </el-form>
    <!-- 如果审核状态不是通过，则显示空状态提示 -->
    <el-empty v-else description="审核中或审核未通过，暂不支持使用此功能" />
</template>

<script setup>
import ProvinceSelect from "@/components/province-select/index.vue"; // 导入省份选择组件
import UploadImage from "@/components/upload-image/index.vue"; // 导入图片上传组件
import { GetStudentInfoApi, PlayerEntryApi } from "@/api/manage/institution"; // 导入用于获取学生信息和提交信息的API函数
import { useUserStore } from "@/store/user"; // 导入Vuex的用户状态管理store
import { ref } from "vue"; // 导入Vue的ref函数，用于创建响应式引用
import { ElMessage } from "element-plus"; // 导入Element Plus的消息提示组件
import IdTypeSelect from "@/components/idtype-select/index.vue"; // 导入证件类型选择组件
import { handleCheckDocumentNumber } from "@/utils/check"; // 导入用于验证证件号码格式的工具函数

// 使用Vue的useUserStore来获取和更新用户状态
const userStore = useUserStore();
const loading = ref(false);
// 定义emit函数，用于触发组件外部的事件
const emit = defineEmits(["sub"]);
const info_modal_data_ref = ref();

// 定义表单验证函数
const checkPhone = (rule, value, callback) => {
    const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
    if (!value) {
        callback(new Error("手机号码不能为空"));
    }
    if (phoneReg.test(value)) {
        callback();
    } else {
        callback(new Error("手机号码格式错误"));
    }
};
const checkName = (rule, value, callback) => {
    const chineseCharactersRegex = /^[\u4e00-\u9fa5]+$/;

    if (!chineseCharactersRegex.test(value)) {
        callback(new Error("请输入中文"));
    } else {
        // Validation passed
        callback();
    }
};
const checkDocumentNumber = (rule, value, callback) => {
    if (!value) {
        callback(new Error("证件号不能为空"));
        return;
    }
    if (!info_modal.value.form_data.documentType) {
        callback(new Error("请选择证件类型"));
        return;
    }
    if (
        !handleCheckDocumentNumber(info_modal.value.form_data.documentType, value)
    ) {
        callback(new Error("证件号格式错误"));
        return;
    }
    callback();
};
/**
 * 信息弹窗数据
 */
const info_modal = ref({
    form_data: {
        gender: "1",
    },
    rules: {
        studentName: [
            {
                required: true,
                validator: checkName,
                trigger: "blur",
            },
        ],
        gender: [
            {
                required: true,
                message: "请选择性别",
                trigger: "blur",
            },
        ],
        documentImg: [
            {
                required: true,
                message: "请上传证件照",
                trigger: "blur",
            },
        ],
        documentType: [
            {
                required: true,
                message: "请选择证件类型",
                trigger: "blur",
            },
        ],
        documentNumber: [
            {
                required: true,
                validator: checkDocumentNumber,
                trigger: "blur",
            },
        ],
        phone: [
            {
                required: true,
                validator: checkPhone,
                trigger: "blur",
            },
        ],
        schoolName: [
            {
                required: true,
                message: "请输入所属学校",
                trigger: "blur",
            },
        ],
        county: [
            {
                required: true,
                message: "请选择所属市区",
                trigger: "blur",
            },
        ],
    },
});
const handleRest = () => {
    info_modal.value.form_data = {
        gender: "1",
    };
};
/**
 * 获取学生信息
 */
const handleGetInfo = async (row) => {
    let res = await GetStudentInfoApi({
        studentId: row.studentId,
    });
    if (res.success) {
        info_modal.value.form_data = res.entity;
    }
};

/**
 * 保存信息
 */
const handleSubmit = () => {
    info_modal_data_ref.value.validate(async (r) => {
        if (!r) {
            return;
        }
        loading.value = true;
        let res;
        console.log(info_modal.value.form_data);
        const newinfo_modal = {
            ...info_modal.value.form_data,
            playerEntry: userStore.info_data.userId,
        };
        console.log(newinfo_modal);
        res = await PlayerEntryApi(newinfo_modal);
        if (res.success) {
            ElMessage.success(res.message);
            emit("sub", res);
        } else {
            ElMessage.error(res.message);
        }
        loading.value = false;
    });
};
// 将handleGetInfo和handleRest函数暴露给组件外部
defineExpose({
    handleGetInfo,
    handleRest,
});
</script>

<style lang="scss" scoped>
.box {
    padding-bottom: 32px;
    padding-left: 32px;
    width: 640px;

    h3 {
        margin-bottom: 16px;
    }
}
</style>